<template>
	<view :class="['zm-find',`theme-${themeType}`]">
		<u-navbar :is-back="false" title="">
			<view class="navbar-slot">
				<view class="animate__animated" @click="openDrawer" hover-class="animate__fadeIn"><u-icon name="list" size="40"></u-icon></view>
				<view class="navbar-slot__search-input"><search-input></search-input></view>
				<view class="navbar-slot__listener animate__animated" hover-class="animate__fadeIn"><u-icon name="mic" size="40"></u-icon></view>
			</view>
		</u-navbar>
		<uni-drawer :width="340" ref="showRight" @change="drawerChange" mode="left" :mask-click="true">
			<scroll-view scroll-y="true" style="height: 100%;">
				<drawer-content :isDark="isDark"></drawer-content>
			</scroll-view>
		</uni-drawer>

		<view class="swiper-wrap"><u-swiper mode="rect" border-radius="12" :list="list"></u-swiper></view>

		<scroll-view scroll-x="true">
			<view class="circle-options">
				<view class="circle-options__item">
					<view class="item-cover">
						<u-image width="30px" height="30px" src="/static/img/home/personal.png"></u-image>
						<view class="today">{{ today }}</view>
					</view>
					<view class="item-title">每日推荐</view>
				</view>
				<view class="circle-options__item" v-for="i in ballData" :key="i.title">
					<view class="item-cover"><u-image width="60px" height="60px" :src="i.url + '.png'"></u-image></view>
					<view class="item-title">{{ i.title }}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 推荐歌单 -->
		<view class="recomand-song">
			<more-btn>
				<template #left>
					<text>推荐歌单</text>
				</template>
			</more-btn>
			<scroll-view scroll-x="true">
				<view class="recomand-song__list">
					<base-card></base-card>
					<base-card></base-card>
					<base-card></base-card>
					<base-card></base-card>
					<base-card></base-card>
					<base-card></base-card>
				</view>
			</scroll-view>
		</view>
		<!-- 中间推荐音乐 -->
		<SimpleCard>
			<view class="recomman-push">
				<more-btn>
					<template #left>
						<text class="iconfont icon-shuaxin" style="font-size: 24px;"></text>
						<text>不可错过的欧美金曲</text>
					</template>
					<template #right>
						<text class="iconfont icon-bofang" style="font-size: 14px;"></text>
						<text>播放</text>
					</template>
				</more-btn>

				<swiper next-margin="50px" style="height: 240px;">
					<swiper-item><song-list-item :isBorder="true"></song-list-item></swiper-item>
					<swiper-item><song-list-item></song-list-item></swiper-item>
					<swiper-item><song-list-item></song-list-item></swiper-item>
				</swiper>
			</view>
		</SimpleCard>
		<!-- 精选音乐视频 -->
		<SimpleCard>
			<view class="selection-music-vedio">
				<more-btn>
					<template #left>
						<text>精选音乐视频</text>
					</template>
					<template #right>
						<text>换一批</text>
						<text class="iconfont icon-shuaxin"></text>
					</template>
				</more-btn>
				<scroll-view scroll-x="true">
					<view class="selection-music-vedio__list">
						<base-card></base-card>
						<base-card></base-card>
						<base-card></base-card>
						<base-card></base-card>
						<base-card></base-card>
						<base-card></base-card>
					</view>
				</scroll-view>
			</view>
		</SimpleCard>

		<!-- 新歌、新碟、数字专辑 -->
		<SimpleCard>
			<view class="new-wrap">
				<more-btn @click="getMore">
					<template #left>
						<view class="new-wrap__type">
							<view v-for="(item, index) in newItem" :key="item.id" :class="['item', { 'is-active': index === curIndex }]" @click="selectNewItem(index)">
								{{ item.title }}
							</view>
						</view>
					</template>
					<template #right>
						<text class="iconfont icon-bofang" style="font-size: 14px;"></text>
						<text>播放</text>
					</template>
				</more-btn>
				<swiper next-margin="50px" style="height: 260px;">
					<swiper-item><song-list-item :isBorder="true"></song-list-item></swiper-item>
					<swiper-item><song-list-item></song-list-item></swiper-item>
					<swiper-item><song-list-item></song-list-item></swiper-item>
				</swiper>
			</view>
		</SimpleCard>
		<!-- 排行榜-->
		<SimpleCard backgroud="rgb(253,247,247)">
			<view class="ranking-list">
				<more-btn @click="getMore">
					<template #left>
						<text>排行榜</text>
					</template>
				</more-btn>
				<view class="ranking-list__item">
					<view class="to_more"></view>
					<swiper next-margin="50px" style="height: 310px">
						<swiper-item><song-list-item :isTitle="true" title="硬地原创音乐榜"></song-list-item></swiper-item>
						<swiper-item><song-list-item :isTitle="true"></song-list-item></swiper-item>
						<swiper-item><song-list-item :isTitle="true"></song-list-item></swiper-item>
					</swiper>
				</view>
			</view>
		</SimpleCard>
		<!-- 音乐日历 -->
		<SimpleCard>
			<view class="music-calander">
				<more-btn @click="getMore">
					<template #left>
						<text>音乐日历</text>
					</template>
					<template #right>
						<text>今日2条</text>
						<text class="iconfont icon-youbian"></text>
					</template>
				</more-btn>
				<view class="calander-info">
					<view class="calander-info__item">
						<view class="info">
							<view class="row">
								<text class="date">今天</text>
								<view class="tag">今日热点</view>
							</view>
							<view class="row"><text class="title">中国女兵的霸主地位不容小觑</text></view>
						</view>
						<view class="cover"><u-image width="60px" height="60px" src="/static/img/logo.png"></u-image></view>
					</view>
					<view class="calander-info__item">
						<view class="info">
							<view class="row">
								<text class="date">明天</text>
								<!-- 		<view class="tag">
									今日热点
								</view> -->
							</view>
							<view class="row"><text class="title">窦唯&朝简最新作品</text></view>
						</view>
						<view class="cover"><u-image width="60px" height="60px" src="/static/img/logo.png"></u-image></view>
					</view>
				</view>
			</view>
		</SimpleCard>
		<!-- 广播电台 -->
		<SimpleCard>
			<view class="broadcast-station">
				<more-btn @click="getMore">
					<template #left>
						<text>
							音乐日历
							<text style="color: #ccc;padding-left: 5px;font-size: 18px;">| 24小时播客</text>
						</text>
					</template>
				</more-btn>
				<scroll-view scroll-x="true">
					<view class="broadcast-station__row">
						<view class="item animate__animated" v-for="i in 6" :key="i" hover-class="animate__fadeIn">
							<u-image width="100%" height="100%" src="/static/img/logo.png" border-radius="50%"></u-image>
							<view class="play"><text class="iconfont icon-bofang"></text></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</SimpleCard>
	</view>
</template>

<script>
import { GET_DRAGON_BALL } from '../../api/model/find.js';
import {THEME_CURRENT} from '@/common/config/config.js'
import SimpleCard from './components/simple-card.vue';
export default {
	components: {
		SimpleCard
	},
	data() {
		return {
			show: false,
			value: '',
			placeholder: '测试数据',
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			ballData: [
				{
					title: '私人FM',
					url: '/static/img/home/fm'
				},
				{
					title: '歌单',
					url: '/static/img/home/songlist'
				},
				{
					title: '排行榜',
					url: '/static/img/home/top'
				},
				{
					title: '直播',
					url: '/static/img/home/live'
				},
				{
					title: '数字专辑',
					url: '/static/img/home/cd'
				},
				{
					title: '专注冥想',
					url: '/static/img/home/think'
				},
				{
					title: '歌房',
					url: '/static/img/home/songhouse'
				},
				{
					title: '游戏专区',
					url: '/static/img/home/game'
				}
			],
			newItem: [
				{
					id: 1,
					title: '新歌'
				},
				{
					id: 2,
					title: '新碟'
				},
				{
					id: 3,
					title: '数字专辑'
				}
			],
			curIndex: 0,
			isDark:false
		};
	},
	computed: {
		today() {
			return new Date().getDate();
		}
	},
	methods: {
		openDrawer() {
			this.$refs.showRight.open();
			
		},
		closeDrawer() {
			this.$refs.showRight.close();
		},
		drawerChange(val) {
			if (val) {
				uni.hideTabBar();
			} else {
				uni.showTabBar();
			}
		},
		getMore() {
			console.log(111);
		},
		selectNewItem(index) {
			this.curIndex = index;
		}
	},
	// 页面加载时
	onShow() {
		// 首先判断一下本地存储内容
	    let res = uni.getStorageSync(THEME_CURRENT)
		if(res){
			switch(res){
				case 'light':
				 this.SET_THEME('light');
				 // tabbar也要改变
				 uni.setTabBarStyle({
				 	backgroundColor:'#FFFFFF'
				 });
				 break;
				case 'dark':
				this.SET_THEME('dark');
				uni.setTabBarStyle({
					backgroundColor:'rgb(24,21,14)'
				});
				break;
			}
		}
	
	}
};
</script>
